<template>
    <div>
        <div class="baidi">
           <div class="one">
             <div class="shoucang">
                <img src="../../../assets/收藏.svg" alt="">
             </div>
            <div class="shoucang-text">收藏</div>
           </div>
           
            <div class="two">

                <van-badge :content="shopCartNum">
                    <div class="gouwuche">
                            <img src="../../../assets/实物-购物车.svg" alt="">
                    </div>
                </van-badge>
            <div class="gouwuche-text">购物车</div>
           </div>
       
           <button  class="color-one" @click="handler">立即购买</button>
               <button class="color-two" @click="addShopCart">加入购物车</button>
                <!-- <teleport to="body"> -->
                    <div class="mask" v-show="show"> </div>
            <!-- </teleport> -->
               <div class="yiban" v-show="show">
            <div class="head">×</div>
            <div class="yiban_img">
                <img src="../../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
            </div>
            <div class="yiban_price">￥99.9</div>
            <div class="yiban_text">请选择&nbsp;数量</div>
            <div class="line"></div>
            
                <div class="shuliang_left">数量</div>
                <div class="shuliang_right">
                    <button class="one">-</button>
                   <div class="n">6</div>
                    <button class="two">+</button>
                </div>
            <button class="red" @click="goBuy">确&nbsp;定</button>
        </div>


        </div>
        
    </div>
</template>

<script setup>
import {useRouter,useRoute}from 'vue-router'
import{ref,computed}from 'vue'
import {getNotToken,post,postCart}from'@/utils/request'
import {useStore}from 'vuex'
import{Toast}from 'vant'
let router=useRouter()
let store=useStore()
let route=useRoute()
console.log(route.query.id);

let goodDetailData = ref({});
let goodsPhotos = ref(null);
let shopCartNum = ref();      
let show = ref(false)
let token=ref(true)
let handler = () => {
show.value = !show.value
}
// 获取购物车列表的长度进行渲染到徽标上
async function getShopCart() {
    if(sessionStorage.getItem('token')){
        shopCartNum.value = 0
    }else{
        let res = await store.dispatch('shop/getShopCart', store.state.user.project_id);
        shopCartNum.value = res.result.length;
          console.log(res.result.length);

    }
}
// async function getShopCart() {
//     let res = await store.dispatch('shop/getShopCart', store.state.user.project_id);
//     shopCartNum.value = res.result.length;
// }
(async () => {
    let res = await getNotToken('/goods/'+route.query.id);
 
    goodDetailData.value = res.data.result;
    goodsPhotos.value = res.data.result.s_goods_photos;   
    getShopCart();
})();

// 添加购物车
const addShopCart = async () => {
    try {
        await post('/shoppingCart', {
            goods_id: goodDetailData.value.id,
            num: 1,
            project_id: '241'
        });
        getShopCart(); 
        Toast.success('添加成功');
    } catch (error) {
        Toast.fail('添加失败');
      
    }
};

// 点击购买
const goBuy = () => {
    store.state.shop.filterToShopCartList = goodDetailData.value;
    store.state.routerType = 'none';
    router.push('/shopcart');
};
</script>

<style lang="scss" scoped>
 .mask {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color:rgba(0,0,0,.7);
            opacity: 0.5;
            font-size: 30px;
            color: #fff,          
        }
.yiban{
    position: absolute;
    left:0;
    bottom:-0.2rem;
    width: 100%;
    height: 4.9rem;
    border-radius:0.1rem;
    background-color: #fff;
    z-index:999;
    .yiban_img{
        margin-top:0.1rem;
        margin-left:0.3rem;
        width: 0.9rem;
        height: 1.1rem;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .head{
        margin-left:3.3rem;
        margin-top:0.2rem;
        width: 0.3rem;
        height: 0.3rem;
        font-size:0.3rem;
        font-weight:lighter;
        text-align: center;
        color:#b2b2b2;
    }
    .yiban_price{
        margin-left:1.5rem;
        margin-top:-0.5rem;
        width: 1.2rem;
        height: 0.2rem;
        font-size:0.2rem;
        color:#ff3f1a;
    }
    .yiban_text{
         margin-left:1.5rem;
         margin-top:0.05rem;
        width: 1rem;
        height: 0.16rem;
        font-size:0.14rem;
        color:#b2b2b2;
    }
    .line{
        margin:0 auto;
        margin-top:0.3rem;
        width: 3.5rem;
        height: 0.01rem;
        background-color: #b2b2b2;
    }
    .shuliang_left{
        margin-top:0.2rem;
        margin-left:0.2rem;
        font-size:0.14rem;
         color:#b2b2b2;
    }
    .one{
         width: 0.25rem;
        height: 0.25rem;
        border-radius: 0.11rem;
        border:0;
        font-size:0.2rem;
        color:#b2b2b2;
        background-color: #f6f6f6;
        float:left;
         margin-top:-0.2rem;
        margin-left:2.5rem;
    }
    .n{
        
        float:left;
        margin-top:-0.1rem;
        margin-left:-0.1rem;
         width: 0.5rem;
        height: 0.25rem;
        text-align: center;
        line-height:0.25rem;
        // background-color: pink;
       
    }
     .two{
         width: 0.25rem;
        height: 0.25rem;
        border-radius: 0.11rem;
        border:0;
        font-size:0.2rem;
        color:#b2b2b2;
        background-color: #f6f6f6;
        float: left;
         margin-top:-0.4rem;
        margin-left:3.2rem;
        .gouwuche{
             width: 0.4rem;
            height: 0.4rem;
            background: #f2f3f5;
            border-radius: 0.04rem;
        }
    }
    .red{
        position:fixed;
        bottom:0.05rem;
        left:0.12rem;
        width: 3.5rem;
        height: 0.5rem;
        background-color:#ff3f1a;
        border:0;
        border-radius:0.25rem;
        font-size:0.16rem;
        color: #fff;
    }
}
.baidi{
    position:fixed;
    left:0;
    bottom:-0.05rem;
    display: flex;
    justify-content: space-around;
    align-content: center;
    width: 100%;
    height: 0.6rem;
    background-color: #fff;
    border-radius: 0.08rem;
    .one{
        width: 0.4rem;
        height: 0.4rem;
       
        .shoucang{
            margin-top:0.04rem;
            width: 0.3rem;
            height: 0.3rem;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .shoucang-text{
            margin-left:0.03rem;
            margin-top:0.03rem;
            font-size:0.12rem;
            color:#888
        }
       
    }
     .two{
        width: 0.4rem;
        height: 0.4rem;
        .gouwuche{
            margin-top:0.04rem;
            width: 0.3rem;
            height: 0.3rem;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .gouwuche-text{
            margin-top:0.03rem;
            font-size:0.12rem;
            color:#888
        }
       
    }
    button{
           margin-top:0.08rem;
        width: 1.2rem;
        height: 0.4rem;
       
        font-size:0.16rem;
        color:#fff;
        text-align: center;
        line-height: 0.4rem;
        border:0;
        border-radius:0.2rem;
    }
    .color-one{
        background-color: #fd721d;
    }
    .color-two{
        background-color: #ec1713;
    }
}
</style>